<template>
  <div class="app-container">
    <!-- 查询条件开始 -->
    <el-form ref="queryForm" :model="queryParams" :inline="true" >
          <el-form-item label="供应商" prop="providerId">
        <el-select
          v-model="queryParams.providerId"
          placeholder="请选择供应商"
          clearable
          size="small"
          style="width:180px"
        >
          <el-option
            v-for="dict in providerOptions"
            :key="dict.providerId"
            :label="dict.providerName"
            :value="dict.providerId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="申请人" prop="applyUserName">
        <el-input
          v-model="queryParams.applyUserName"
          placeholder="请输入关键字"
          clearable
          size="small"
          style="width:180px"
        />
      </el-form-item>
     
      
    
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 查询条件结束 -->

    <!-- 表格工具按钮开始 -->
   <el-row :gutter="10" style="margin-bottom: 8px;">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" size="mini" :disabled="single" @click="handleAuditPass">审核通过</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" icon="el-icon-edit" size="mini" :disabled="single" @click="handleAuditNoPass">审核反驳</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="single" @click="handleViewItem">查看详情</el-button>
      </el-col>
    </el-row>

    <!-- 表格工具按钮结束 -->

    <!-- 数据表格开始 -->
    <el-table v-loading="loading" border :data="purchaseTableList" @selection-change="handleSelectionChnage">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="单据ID" align="center" prop="purchaseId" />
      <el-table-column label="供应商"  prop="providerId" :formatter="providerFormatter" />
      <el-table-column label="采购批发总额" align="center" prop="purchaseTradeTotalAmount" />
      <el-table-column label="状态" align="center" prop="status" :formatter="statusFormatter" />
      <el-table-column label="申请人" align="center" prop="applyUserName" />
      <el-table-column label="入库操作人" align="center" prop="storageOptUser" />
      <el-table-column label="入库时间" prop="storageOptTime" align="center"  />
      <el-table-column label="创建时间" align="createTime" prop="createTime" />
    </el-table>
    <!-- 数据表格结束 -->
    <!-- 分页控件开始 -->
    <el-pagination
      v-show="total>0"
      :current-page="queryParams.pageNum"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="queryParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 分页控件结束 -->

    <!--查看详情弹出层开始-->
    <el-dialog
      :title="title"
      :visible.sync="open"
      center
      append-to-body
    >
    <el-table v-loading="loading" border :data="auditListTableList" >
      <el-table-column width="188px" label="详情ID" align="center" prop="itemId" />
      <el-table-column width="200px" label="单据ID"  prop="purchaseId" align="center"  />
      <el-table-column label="采购数量" align="center" prop="purchaseNumber" />
      <el-table-column label="批发价" align="center" prop="tradePrice"  />
      <el-table-column label="批发额" align="center" prop="tradeTotalAmount" />
      <el-table-column label="药品生产批次号" align="center" prop="batchNumber" />
      <el-table-column label="药品名称" prop="medicinesName" align="center"  />
      <el-table-column label="单位" align="center" prop="unit" />
    </el-table>
    
    </el-dialog>

    <!--查看详情弹出层结束-->

  </div>
</template>
<script>
// 引入api
import { listPurchaseForPage,auditPass,auditNoPass, getPurchaseItemById,listPurchasePendingForPage} from '@/api/erp/purchase'
import {selectAllProvider} from '@/api/erp/provider'
export default {
  // 定义页面数据
  data() {
    return {
      // 是否启用遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
   
      // 分页数据总条数
      total: 0,
      // 字典表格数据
      purchaseTableList: [],
      //查看详情数据
      auditListTableList:[],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 状态数据字典s
      statusOptions: [],  
      // 供应商数据
      providerOptions: [],
   
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        providerId: undefined,
        applyUserName: undefined,
        status: undefined,
      },
      
    }
  },
  // 勾子
  created() {
    // 使用全局的根据字典类型查询字典数据的方法查询字典数据
    this.getDataByType('his_order_status').then(res => {
      this.statusOptions = res.data
    })
    selectAllProvider().then(res =>{
      this.providerOptions = res.data
    })
    // 查询表格数据
    this.getPurchaseList()
  },
  // 方法
  methods: {
    // 查询表格数据
    getPurchaseList() {
      this.loading = true // 打开遮罩
      listPurchasePendingForPage(this.queryParams).then(res => {
        this.purchaseTableList = res.data
        this.total = res.total
        this.loading = false// 关闭遮罩
      })
    },
    //根据单据Id查看详情
    getAuditListTableList(){
      this.loading = true
      getPurchaseItemById(this.ids[0]).then(res =>{
        this.auditListTableList = res.data
        this.loading = false
      })
    },
    // 条件查询
    handleQuery() {
      this.getPurchaseList()
    },
    // 重置查询条件
    resetQuery() {
      this.resetForm('queryForm')
      this.getPurchaseList()
    },
    // 数据表格的多选择框选择时触发
    // 分页pageSize变化时触发
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      // 重新查询
      this.getPurchaseList()
    },
    // 点击上一页  下一页，跳转到哪一页面时触发
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      // 重新查询
      this.getPurchaseList()
    },
    // 翻译状态
    statusFormatter(row) {
      return this.selectDictLabel(this.statusOptions, row.status)
    },
    //翻译供应商
    providerFormatter(row){
      let name = ''
      this.providerOptions.filter(item => {
        if (parseInt(row.providerId) === parseInt(item.providerId)) {
          name = item.providerName
        }
      })
      return name

    },
    handleSelectionChnage(selection){
        this.single = !(selection.length ==1)
        //map有返回值 foreach 没有返回值  filter 有条件判断
        this.ids = selection.map(item => item.purchaseId)
    },
    //查看详情
    handleViewItem(){
      this.open = true
      this.title = '单据编号为【' + this.ids[0] + '】的采购详情数据'
      this.getAuditListTableList()
    },
    //审核通过
    handleAuditPass(){
      this.$confirm('此操作将不可逆, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        auditPass(this.ids[0]).then(res =>{
          this.msgSuccess("审批成功")
          this.getPurchaseList()
        })
        }).catch(() => {
         this.msgInfo("取消成功") 
        });
        
    },
    //审核反驳
    handleAuditNoPass(){
            this.$prompt('请输入反驳原因:', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^[\u4E00-\u9FA5A-Za-z0-9^%&',;=?]{5,}$/,
          inputErrorMessage: '字数必须在5位以上(重要)'
        }).then(({ value }) => {
        auditNoPass(this.ids[0],value).then(res =>{
          this.msgSuccess("反驳成功")
          this.getPurchaseList()
        })
//         <el-input
//   type="textarea"
//   placeholder="请输入内容"
//   v-model="textarea"
//   maxlength="30"
//   show-word-limit
// >
// </el-input>
        
        })
    },
   

   
  },
  watch:{
    'queryParams.providerId':{
      handler(newVal,oldVal){
        this.queryParams.pageNum = 1
        this.getPurchaseList()
      }
    },
    'queryParams.applyUserName':{
      handler(newVal,oldVal){
        this.queryParams.pageNum = 1
        this.getPurchaseList()
      }
    },
    'queryParams.status':{
      handler(newVal,oldVal){
        this.queryParams.pageNum = 1
        this.getPurchaseList()
      }
    }
  }
}
</script>
